<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>售罄看板</title>
  <link rel="shortcut icon" href="./static/image/favicon.ico">
  <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/element-ui/2.14.1/theme-chalk/index.min.css">
  <link rel="stylesheet" type="text/css" href="./static/libs/element-ui/index.css">
  <link rel="stylesheet" type="text/css" href="./static/css/public.css">
  <link rel="stylesheet" type="text/css" href="./static/css/m_tailwind.css">
  <style>
  .sold-out-kanban {
    padding: 24px;
  }

  .row1 {
    border: 1px solid #ffdaa3;
    background-image: linear-gradient(97deg, #fffbf4, #fff6e6);
    border-radius: 6px;
    min-height: 158px;
  }

  .row1 .top {
    background: rgba(255, 218, 163, .29);
  }

  .row2 {
    display: flex;
  }

  .row2>.item {
    width: 0;
    flex: 1;
    padding: 16px;
    border: 1px solid #dbdbdb;
    -moz-border-radius: 6px;
    border-radius: 6px;
  }

  .row2>.item+.item {
    margin-left: 12px;
  }

  .row2 .b1 {
    font-size: 14px;
    padding-bottom: 3px;
    color: rgba(0, 0, 0, 0.8);
  }

  .row2 .b2 {
    margin: 12px 0;
    display: flex;
    align-items: flex-end;
  }

  .row2 .b2 .num1 {
    font-size: 24px;
    line-height: 27px;
  }

  .row2 .b2 .num2 {
    margin-bottom: 3px;
    font-size: 12px;
    color: rgba(0, 0, 0, .8);
  }

  .row2 .b3 {
    height: 36px;
    color: rgba(0, 0, 0, .4);
    font-size: 12px;
    line-height: 14px;
    display: flex;
    white-space: nowrap;
  }

  .row2 .b3 .item>div:first-child {
    margin-bottom: 8px;
  }

  .row2 .b3 .item:first-child {
    border-right: 1px solid rgba(0, 0, 0, .08);
    padding-right: 4.71%;
  }

  .row2 .b3 .item:nth-child(2) {
    padding: 0 4.71%;
  }

  .row2 .b4 {
    margin-top: 16px;
    background: #FAFAFA;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <m-layout>
      <div class="sold-out-kanban">
        <div class="row1">
          <div class="top flex items-center">
            <img style="width:62px;" src="./static/image/img18.png">
            <div class="flex-1 w-0">
              <div class="text-14 color-gray-800 leading-none mb-8">Temu跨境电商售罄看板，助力减少商品售罄</div>
              <div class="text-12 color-gray-600 leading-none">商品一旦售罄，将直接降低商品的搜索、推荐权重，失去广告外推和参与活动的机会，造成销量和利润持续损失，为保障生意请务必重点关注。</div>
            </div>
          </div>
          <expressive-outcomes :data="expressiveOutcomes"></expressive-outcomes>
        </div>
        <m-title1 name="数据概览" style="margin: 16px 0 10px;">
          <m-radio-group slot="extra" v-model="form.aaa" :options="['全部', 'JIT', '非JIT']"></m-radio-group>
        </m-title1>
        <div class="row2">
          <div class="item">
            <div class="b1">即将售罄SKU数&占比</div>
            <div class="b2">
              <div class="num1">{{GDP1.num}}</div>
              <div class="num2">（{{GDP1.bfb}}%）</div>
            </div>
            <div class="b3">
              <div class="item">
                <div>较昨日：<num-type1 :data="GDP1.bfb1_1"></num-type1></div>
                <div>周同比：<num-type1 :data="GDP1.bfb1_2" type="2"></num-type1></div>
              </div>
              <div class="item">
                <div>今日新增：</div>
                <div><span style="color:#0071f3">{{GDP1.addNum}}</span>（{{GDP1.addBfb}}%）</div>
              </div>
              <div class="item">
                <div>较昨日：<num-type1 :data="GDP1.bfb2_1"></num-type1></div>
                <div>周同比：<num-type1 :data="GDP1.bfb2_2" type="2"></num-type1></div>
              </div>
            </div>
            <div class="b4">
              <!-- <m-empty></m-empty> -->
              <m-charts :options="option1"></m-charts>
            </div>
          </div>
          <div class="item">
            <div class="b1">已售罄SKU数&占比</div>
            <div class="b2">
              <div class="num1">{{GDP2.num}}</div>
              <div class="num2">（{{GDP2.bfb}}%）</div>
            </div>
            <div class="b3">
              <div class="item">
                <div>较昨日：<num-type1 :data="GDP2.bfb1_1"></num-type1></div>
                <div>周同比：<num-type1 :data="GDP2.bfb1_2" type="2"></num-type1></div>
              </div>
              <div class="item">
                <div>今日新增：</div>
                <div><span style="color:#0071f3">{{GDP2.addNum}}</span>（{{GDP2.addBfb}}%）</div>
              </div>
              <div class="item">
                <div>较昨日：<num-type1 :data="GDP2.bfb2_1"></num-type1></div>
                <div>周同比：<num-type1 :data="GDP2.bfb2_2" type="2"></num-type1></div>
              </div>
            </div>
            <div class="b4">
              <!-- <m-empty></m-empty> -->
              <m-charts :options="option2"></m-charts>
            </div>
          </div>
          <div class="item" style="background:#FFFCFB;">
            <div class="b1">预估近7天销售损失(CNY)&占比</div>
            <div class="b2">
              <div class="num1" style="color:#F71066;">￥{{GDP3.num}}</div>
              <div class="num2">（{{GDP3.bfb}}%）</div>
            </div>
            <!-- <div class="b3"></div> -->
            <div class="b4" style="height:256px;">
              <m-empty background="rgb(255, 247, 246)"></m-empty>
              <!-- <m-charts :options="option3"></m-charts> -->
            </div>
          </div>
        </div>
        <m-title1 name="售罄明细" style="margin: 20px 0 16px;"></m-title1>
        <m-tabs v-model="form.bbb" :options="['即将售罄', '已售罄']"></m-tabs>
        <div class="relative">
          <el-checkbox class="absolute" style="top:-26px;right:0;" v-model="form.ccc">仅看今日新增</el-checkbox>
        </div>
        <m-search style="margin-top:12px;margin-bottom:20px;" :model="form" :handle-span="8">
          <el-col :span="16">
            <el-form-item label="ID查询" prop="ddd">
              <el-input placeholder="请输入内容" v-model="form.ddd">
                <el-select v-model="form.eee" style="width: 100px;" slot="prepend" placeholder="请选择">
                  <el-option v-for="item in id_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否JIT商品" prop="fff">
              <el-select class="w-full" v-model="form.fff" placeholder="请选择">
                <el-option v-for="item in yes_or_no" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="货号" prop="ggg">
              <el-input placeholder="请输入内容" v-model="form.ggg">
                <el-select v-model="form.hhh" style="width: 100px;" slot="prepend" placeholder="请选择">
                  <el-option v-for="item in id_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="库存可售天数" prop="iii">
              <el-input v-model="form.iii" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="类目" prop="jjj">
              <el-input v-model="form.jjj" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <template slot="hide">
            <el-col :span="8">
              <el-form-item label="近7天SKU销量" prop="kkk">
                <el-input v-model="form.kkk" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="近7天SKC销量" prop="lll">
                <el-input v-model="form.lll" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否定制商品" prop="mmm">
                <el-select class="w-full" v-model="form.mmm" placeholder="请选择">
                  <el-option v-for="item in yes_or_no" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
        </m-search>
        <el-table border :data="tableData" :span-method="objectSpanMethod" style="width: 100%">
          <template v-for="(item, index) in tableHead">
            <el-table-column v-if="item.key == 'a1'" :prop="item.key" :label="item.name" :min-width="item.width">
              <template slot-scope="scope">
                <goods-info :data="scope.row.a1"></goods-info>
              </template>
            </el-table-column>
            <el-table-column v-else :prop="item.key" :label="item.name" :min-width="item.width" show-overflow-tooltip>
            </el-table-column>
          </template>
        </el-table>
      </div>
    </m-layout>
  </div>
  <script src="./static/libs/vue2.6.8/vue.min.js"></script>
  <script src="./static/libs/element-ui/index.min.js"></script>
  <script src="./static/libs/echarts5.4.3.js"></script>
  <script src="./static/js/Tools.js"></script>
  <script src="./static/data/soldOutData.js"></script>
  <script src="./config/soldOutKanban.js"></script>
  <script src="./static/components/common.js"></script>
  <script>
  var app = new Vue({
    el: '#app',
    data() {
      return {
        form: {
          aaa: '全部',
          bbb: '即将售罄',
          ccc: false,
          ddd: '',
          eee: '',
          fff: '',
          ggg: '',
          hhh: '',
          iii: '',
          jjj: '',
          kkk: '',
          lll: '',
          mmm: ''
        },

        // ID类型
        id_type: [
          { label: 'SKC', value: 'SKC' },
          { label: 'SKU', value: 'SKU' },
          { label: 'SPU', value: 'SPU' },
        ],
        // 货号类型
        hh_type: [
          { label: 'SKC货号', value: 'SKC货号' },
          { label: 'SKU货号', value: 'SKU货号' },
        ],
        // 是否
        yes_or_no: [
          { label: '是', value: '是' },
          { label: '否', value: '否' },
        ],
        // 是否定制商品
        dzsp: [
          { label: '订制品', value: '订制品' },
          { label: '非定制品', value: '非定制品' },
        ],

        tableHead: [
          { name: '商品信息', key: 'a1', width: 200 },
          { name: '商品SKC信息', key: 'a2', width: 200 },
          { name: '近7天SKU销量', key: 'a3' },
          { name: '近7天SKC销量', key: 'a4' },
          { name: '仓内可用库存', key: 'a5' },
          { name: '仓内暂不可用库存', key: 'a6' },
          { name: '已发货库存', key: 'a7' },
          { name: '合计库存', key: 'a8' },
          { name: '库存可售天数', key: 'a9' },
          { name: '近7天销售损失（CNY）', key: 'a10' },
          { name: '近7天销售损失占比', key: 'a11' },
          { name: '近7天sku已支付销量', key: 'a12' },
          { name: '待发货备货单ID', key: 'a13' },
          { name: '降低售罄引导', key: 'a14' },
        ],
        tableData: [],

        // 表现结果
        expressiveOutcomes: CONFIG.expressiveOutcomes,

        // 配置
        GDP1: CONFIG.GDP1,
        // 图表
        option1: null,
        // 配置
        GDP2: CONFIG.GDP2,
        // 图表
        option2: null,
        // 配置
        GDP3: CONFIG.GDP3,
        // 图表
        option3: null,
      }
    },
    mounted() {
      // this.tableData = this.getTableData();
      this.option1 = this.getOption(CONFIG.GDP1.chat);
      this.option2 = this.getOption(CONFIG.GDP2.chat);
      this.option3 = this.getOption(CONFIG.GDP3.chat);
    },
    methods: {
      getTableData() {
        var _this = this;
        var head = this.tableHead;
        var res = [];
        CONFIG.tableData.forEach(function(aItem, aIndex) {
          let aRow = aItem[1];
          aRow.forEach(function(bItem, bIndex) {
            var obj = {};
            if (bIndex == 0) {
              obj[head[0].key] = JSON.parse(JSON.stringify(aItem[0]));
              obj.rows = aRow.length;
            }
            for (var i = 1; i < head.length; i++) {
              obj[head[i].key] = bItem[i - 1];
            }
            res.push(obj);
          })
        })
        return res;
      },

      objectSpanMethod(data) {
        let key = this.tableHead[data.columnIndex].key;
        if (key == 'a1') {
          if (data.row.rows) {
            return {
              rowspan: data.row.rows,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      },

      // 获取配置
      getOption(data) {
      	return {
      		title: {
            text: data.name,
            textStyle: {
              fontSize: 14,
              fontWeight: 'bold'
            },
            left: 0,
            top: 0
          },
		      grid: {
		      	right: 40,
		        left: 35,
		        top: 35,
		        bottom: 20 //也可设置left和right设置距离来控制图表的大小
		      },
		      tooltip: {
		        trigger: "axis",
		        axisPointer: {
		          type: "shadow",
		          label: {
		            show: true
		          }
		        }
		      },
		      legend: {
		        data: [data.yDataBar.name, data.yDataLine.name],
		        top: 0,
		        right: 0,
            itemWidth: 14
		      },
		      xAxis: {
		        data: data.xData,
		        axisLine: {
		          show: true, //隐藏X轴轴线
		          lineStyle: {
		            color: '#888991'
		          }
		        },
		        axisTick: {
		          show: true //隐藏X轴刻度
		        },
		        axisLabel: {
		          show: true,
		        },
		      },
		      yAxis: [{
		          type: "value",
		          name: data.yDataBar.name,
		          nameTextStyle: {
		            color: "#fff"
		          },
		          splitLine: {
		            show: true
		          },
		          axisTick: {
		            show: false
		          },
		          axisLine: {
		            show: false
		          },
		          axisLabel: {
		            show: true,
		          },
		        },
		        {
		          type: "value",
		          name: data.yDataLine.name,
		          nameTextStyle: {
		            color: "#fff"
		          },
		          position: "right",
		          splitLine: {
		            show: false
		          },
		          axisTick: {
		            show: false
		          },
		          axisLine: {
		            show: false
		          },
		          axisLabel: {
		            show: true,
		            formatter: "{value}%", //右侧Y轴文字显示
		          }
		        },
		      ],
		      series: [{
		          name: data.yDataBar.name,
		          type: "bar",
		          barWidth: data.yDataBar.data.length > 20 ? '70%' : 20,
		          itemStyle: {
		            normal: {
		              color: '#FB7701'
		            }
		          },
		          data: data.yDataBar.data
		        },
		        {
		          name: data.yDataLine.name,
		          type: "line",
		          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
		          smooth: false, //平滑曲线显示
		          symbol: "none", //标记的图形为实心圆
		          lineStyle: {
		            color: "#4E6986"
		          },
		          data: data.yDataLine.data
		        }
		      ]
		    }
      }
    }
  })
  </script>
</body>

</html>